<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./assets/layui/css/layui.css" />
  </head>
  <body>
    <div class="layui-container">
      <div id="demoTree"></div>

      <button class="layui-btn" id="btn1">获取选中的数据</button>
      <button class="layui-btn" id="btn2">设置选中的数据</button>
    </div>

    <script src="./assets/layui/layui.js"></script>
    <script>
      layui.use(["tree"], function () {
        var tree = layui.tree,
          $ = layui.$;
        tree.render({
          // tree 组件 2.5.0+
          elem: "#demoTree", // 传DOM选择器
          id: "demoTree", // 唯一索引
          showCheckbox: true, // 是否显示复选框
          edit: ["add", "update", "del"], // 是否开启节点的操作图标 支持的操作图标有：add、update、del
          accordion: true, // 是否开启手风琴模式，默认 false
          onlyIconControl: true, // 是否仅允许节点左侧图标控制展开收缩。默认 false
          isJump: false, //  是否允许点击节点时弹出新窗口跳转。默认 false，若开启，需在节点数据中设定 link ？ href？参数 (实测是 href)
          showLine: true, // 是否开启连接线。默认 true，若设为 false，则节点左侧出现三角图标。
          text: {
            defaultNodeName: "未命名", //节点默认名称
            none: "无数据", //数据为空时的提示文本
          },
          data: [
            {
              title: "河南",
              field: "province", //字段名
              href: "http://www.baidu.com", // 需开启 isJump
              // spread: true, //  节点是否初始展开，默认 false
              // checked: false, // ！！ 必须设置ID 节点是否初始为选中状态（如果开启复选框的话），默认 false
              // disabled: false, // 节点是否为禁用状态。默认 false
              id: 100,
              children: [
                {
                  id: 101,
                  title: "郑州",
                  children: [
                    { id: 1011, title: "管城区" },
                    { id: 1012, title: "中原区" },
                  ],
                },
                {
                  id: 102,
                  title: "漯河",
                  children: [
                    { id: 1021, title: "郾城区", children: [{ checked: true, id: 1022, title: "孟庙镇" }] },
                    { id: 1023, title: "源汇区" },
                  ],
                },
              ],
            },
          ],
          click: function (obj) {
            // 节点被点击的回调 - 不是勾选复选框
            console.log(obj.data); //得到当前点击的节点数据
            console.log(obj.state); //得到当前节点的展开状态：open、close、normal
            console.log(obj.elem); //得到当前节点元素

            console.log(obj.data.children); //当前节点下是否有子节点
          },
          oncheck: function (obj) {
            // 复选框被点击的回调
            console.log(obj.data); //得到当前点击的节点数据
            console.log(obj.checked); //得到当前节点的勾选状态：open、close、normal
            console.log(obj.elem); //得到当前节点元素
          },
          operate: function (obj) {
            // 节点的操作图标的回调

            var type = obj.type; //得到操作类型：add、edit、del
            var data = obj.data; //得到当前节点的数据
            var elem = obj.elem; //得到当前节点元素

            //Ajax 操作
            var id = data.id; //得到节点索引
            if (type === "add") {
              //增加节点
              console.log(data, elem);
              //返回设置 id 值
              return 333;
            } else if (type === "update") {
              //修改节点
              console.log(elem.find(".layui-tree-txt").html()); //得到修改后的内容
            } else if (type === "del") {
              //删除节点
            }
          },
        });

        //获得选中的节点
        $("#btn1").on("click", function () {
          console.log(tree.getChecked("demoTree"));
        });

        // 设置节点勾选（追加）
        $("#btn2").on("click", function () {
          tree.setChecked("demoTree", [1023]);
        });

        // //可以重载所有基础参数
        // tree.reload("demoTree", {
        //   //新的参数
        // });
      });
    </script>
  </body>
</html>
